<template>
	<div class="mk-bill-panel">
		<div class="mk-bill-panel-button">
			<slot name="button"></slot>
		</div>
		<MkCollapsePanel>
			<template #header>
				<div>
					<div>
						<span style="font-size: large; padding: 0px 10px;">{{ `${bill.danJuLeiXing ?? ''} ` }}</span>
						<span style="font-size: large; padding: 0px 10px;">{{ ` ${bill.id ?? ''} ` }}</span>
						<el-tag v-show="showZhuangTai" style="font-size: medium;  margin: 0px 30px;">{{
							bill.danJuZhuangTai }}
						</el-tag>
						{{ `${bill.createUserName ?? ''} ${bill.updateTime ?? bill.createTime ?? ''}` }}
					</div>
				</div>
			</template>
			<el-descriptions :column="4">
				<el-descriptions-item label="单据类型"> {{ bill.danJuLeiXing }} </el-descriptions-item>
				<el-descriptions-item label="单号"> {{ bill.id }} </el-descriptions-item>
				<el-descriptions-item label="单据状态"> {{ bill.danJuZhuangTai }} </el-descriptions-item>
				<el-descriptions-item label=""></el-descriptions-item>
				<el-descriptions-item :label="createUserNameLabel"> {{ bill.createUserName }} </el-descriptions-item>
				<el-descriptions-item :label="createTimeLabel"> {{ bill.createTime }} </el-descriptions-item>
				<el-descriptions-item label="修改人"> {{ bill.updateUserName ?? bill.createUserName }}
				</el-descriptions-item>
				<el-descriptions-item label="修改时间"> {{ bill.updateTime ?? bill.createTime }} </el-descriptions-item>
				<slot name="extra"></slot>
			</el-descriptions>
		</MkCollapsePanel>
		<slot name="info"></slot>
		<div class="mk-bill-panel-main">
			<slot></slot>
		</div>
		<MkPrintWeb :code="printCode" ref="printRef"></MkPrintWeb>
		<MkOptBill ref='caoZuoRef' :danJuLeiXing="bill.danJuLeiXing" :entity="bill.id" />
	</div>
</template>

<script setup lang="ts">
import { enumCode } from '/@/const';
import { isNull } from '/@/utils';

// 单据面板
defineOptions({
	name: 'MkBillPanel4ShenQing',
});

const printRef = ref();
const caoZuoRef = ref();
const props = defineProps({
	bill: {
		type: Object as PropType<BillEntityType>,
		required: true,
	},
	showBaseInfo: {
		type: Boolean,
		default: true,
	},
	createUserNameLabel: {
		type: String,
		default: '创建人',
	},
	createTimeLabel: {
		type: String,
		default: '创建时间',
	},
	printCode: {
		type: String,
		default: '打印代码',
	},
});

const showZhuangTai = computed(() => {
	return props.bill.danJuZhuangTai == enumCode.Djzt.已生效 || isNull(props.bill.danJuZhuangTai) ? false : true;
});

// 调用浏览器进行打印
const printWeb = async (p1: string, p2: string, p3: string) => {
	printRef.value.printWeb(p1, p2, p3);
};

// 显示操作记录
const showCaoZuo = () => {
	caoZuoRef.value.open();
}

defineExpose({ printWeb, showCaoZuo });
</script>

<style lang="scss" scoped>
.mk-bill-panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;

	.mk-bill-panel-main {
		flex: 1;
		box-sizing: border-box;

		:deep(> div) {
			height: 100%;
		}
	}

	.mk-bill-panel-button {
		padding: 10px;

		:deep(.el-button + .el-dropdown) {
			margin-left: 12px !important;
		}

		:deep(.el-dropdown + .el-button) {
			margin-left: 12px !important;
		}

		:deep(.el-dropdown + .el-dropdown) {
			margin-left: 12px !important;
		}
	}
}
</style>
